<!DOCTYPE HTML>
<html>
<head>
	<meta charset="UTF-8">
	<title>第一题</title>
	<style type="text/css">
		*{margin:0; padding: 0px; border: none; text-align: center; font-family: "宋体";}
		li{ border: 1px solid #000; background: #f4f4f4; float: left; width: 188px; height: 248px; margin:0 10px 0 0; display: inline;}
		li img{ width: 100%; height:100%;}
		#f,#m{ border: 1px solid #000; padding: 10px; overflow: hidden;}
		#f{ width: 1280px; margin: 20px auto;}
		#m{ width:1190px; margin: 0 auto; position: relative; z-index: 2;}
		#m ul{height: 250px; position: relative; z-index: 1;}
		#l{ float: left; }
		#r{ float: right; }
		#l,#r{ font-size: 50px; line-height: 272px; height: 272px; _height: 274px; font-weight: bold; background:#00882D; cursor: pointer; color: #fff;}
		#l.disabled ,#r.disabled{ cursor: default; background: #BBB;}
	</style>
	<script type="text/javascript">
		window.onload = function(){
			(function(){
				var $ = function(id){return document.getElementById(id)}
				var l = $('l'), 
					r = $('r'), 
					m = $('m'), 
					list = $('list'),
					roll_w = 200, //每次滚动的宽度
					list_width = list.getElementsByTagName('li').length * 200, //根据图片数量计算列表UL的宽度
					min_left = 1200 - list_width, //最小left值
					inanimat = false; //动画开关
					list.style.width = list_width + 'px'; //重设列表UL的宽度			
				function roll (dir){ //滚动方法
					var list_l = parseInt(list.style.left || 0), new_list_l, speed;
					function animat(){ //动画方法
						var _left = parseInt(list.style.left || 0);
						if(new_list_l != _left){
							inanimat = true;
							list.style.left = _left + speed +'px';
							setTimeout(arguments.callee,50);
						}else{
							inanimat = false;
						}
						setArrowsStyle(parseInt(list.style.left)); //设置箭头样式
					}
					if(dir=='l'){	//点击左箭头
						new_list_l = list_l + roll_w;
						speed = 20;
						if(list_l<0){
							if(!inanimat){
								animat();	
							}			
						}
					}else{ //点击右箭头
						new_list_l = list_l - roll_w;
						speed = -20;
						if(list_l>min_left){
							if(!inanimat){
								animat();	
							}	
						}
					}
				}
				function setArrowsStyle(n){ //设置箭头样式方法
					if(n>=0){
						l.className = 'disabled';
						r.className = '';
					}else if(n<=min_left){
						l.className = '';
						r.className = 'disabled';
					}else{
						l.className = '';
						r.className = '';
					}
				}
				function addMouseWheelListener(el,event){ //滚轮方法
					function mouseWheel (event){
						var e = event || window.event,
                            wheel = e.wheelDelta ||e.detail,
                            dir = wheel > 0 ? 'l' : 'r';
						if(e.preventDefault){ //阻止浏览器默认滚动条事件
							e.preventDefault();
						}else { //for IE8-
							e.returnValue = false ;
						}
						roll(dir);
					}
					if(el.addEventListener){ //绑定事件 for FF
						el.addEventListener('DOMMouseScroll',mouseWheel,false);
					}
					el.onmousewheel = mouseWheel; //绑定事件no FF
				}
				l.onclick = function(){roll('l');} 
				r.onclick = function(){roll('r');}
				addMouseWheelListener(m);
			}())
		}
	</script>
</head>
<body>
	<div id="f">
		<div id="l" class="disabled">&lt;</div>
		<div id="r"  class="">&gt;</div>
		<div id="m">
			<ul id="list">
				<li><img src="" alt="01" /></li>
				<li><img src="" alt="02" /></li>
				<li><img src="" alt="03" /></li>
				<li><img src="" alt="04" /></li>
				<li><img src="" alt="05" /></li>
				<li><img src="" alt="06" /></li>
				<li><img src="" alt="07" /></li>
				<li><img src="" alt="08" /></li>
				<li><img src="" alt="09" /></li>
				<li><img src="" alt="10" /></li>
				<li><img src="" alt="11" /></li>
				<li><img src="" alt="12" /></li>
				<li><img src="" alt="13" /></li>
			</ul>
		</div>
	</div>
</body>
</html>